<template>
	<view class="getAddress_box">
		<view class="sousou">
			<input type="text" @confirm="ToTels" v-model="telname" class="input" />
			<view class="btns" @click="ToTels" :class="'bg-'+themeColor.name">搜索</view>
		</view>
		<view class="List">
			<view class="item" v-for="(item,idx) in TelLists" :key="idx" @tap="ToTel(item)">
				<view class="name">{{item.displayName}}</view>
				<view class="tel">({{item.value}})</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TelList: [],
				TelList2: [],
				telname: ''
			};
		},
		computed: {
			TelLists() {
				let {
					TelList
				} = this
				let that = this
				return TelList
			}
		},
		onShow() {
			this.PlusGetTEL()
		},
		methods: {
			ToTel(item) { //拨打电话
				let phoneNumber = item.value
				phoneNumber = phoneNumber.replace(/\s*/g, "");
				uni.makePhoneCall({
					phoneNumber
				});
			},
			ToTels() { //查找
				let telname = this.telname.trim()
				let {
					TelLists,
					TelList2
				} = this
				if (telname) {
					let idx = TelList2.findIndex((item) => {
						console.log('item.displayName.indexOf(telname)', item.displayName.indexOf(telname));
						let {
							displayName,
							value
						} = item
						return (displayName.indexOf(telname) != -1 || value.indexOf(telname) != -1)
					})
					console.log('idx', idx);
					if (idx != -1) {
						return this.TelList = [TelList2[idx]]
					}
					uni.showToast({
						title: '查找不到',
						icon: "none"
					})
					this.PlusGetTEL()
				}
			},
			getAddressBook(ADDRESSBOOK) {
				let TelList = []
				return new Promise((resolve) => {
					//获取SIM联系人
					plus.contacts.getAddressBook(ADDRESSBOOK, function(addressbook) {
						// 查找联系人			
						addressbook.find(["displayName", "phoneNumbers"], function(contacts) {
							console.log('获取联系人成功' + JSON.stringify(ADDRESSBOOK), contacts)
							contacts.forEach((item, idx) => {
								if (item.displayName) {
									let items = {
										displayName: item.displayName,
										value: item.phoneNumbers[0].value
									}
									TelList = [...TelList, items]
								}
							})
						});
					})
					resolve([...TelList]);
				})
			},
			async PlusGetTEL() {
				let that = this,
					TelList = [];
				// #ifdef APP-PLUS
				await that.getAddressBook(plus.contacts.ADDRESSBOOK_SIM).then((res) => { //获取sim联系人
					console.log('1', 1);
					that.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE).then((res1) => { //获取手机联系人
						console.log('2', 2);
						that.TelList = [...res, ...res1]
					})
				})
				// #endif
				await that.unique().then((res) => { //数组去重方法 使用await延迟执行下面的赋值
					console.log('res', res);
					TelList = [...res]
					if (TelList.length == 0) {
						TelList = [{
								displayName: '王五',
								value: "15621675252"
							},
							{
								displayName: '张三',
								value: "15621675253"
							}
						]
					}
				})
				this.TelList = TelList
				this.TelList2 = JSON.parse(JSON.stringify(TelList))
			},
			unique() {
				console.log('0', 0);
				return new Promise((resolve) => { //只有promise异步操作才会使用await延迟执行	
					console.log('3', 3);
					let arr = this.TelList
					let map = new Map();
					for (let item of arr) {
						if (!map.has(item.displayName)) {
							map.set(item.displayName, item);
						}
					}
					setTimeout(() => {
						resolve([...map.values()]);
					}, 1000)
				});
			},
		}

	}
</script>

<style lang="scss">
	.getAddress_box {
		width: 100%;

		.sousou {
			margin-top: 10rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx;
			box-sizing: border-box;

			.input {
				padding-left: 20rpx;
				box-sizing: border-box;
				width: calc(100% - 100rpx);
				line-height: 80rpx;
				height: 80rpx;
				border: 1px solid #dadada;
				border-right: none;
				border-radius: 20rpx 0 0 20rpx;

			}

			.btns {
				color: #FFFFFF;
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 0 20rpx 20rpx 0;
			}
		}

		.List {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #daadad;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tel {
					color: blue;
				}
			}
		}
	}
</style>
